<template>
	<view class="content">
		<!-- 项目基本信息 -->
		<view class="box">
			<view class="cu-list menu margin-top" >
				<view class="cu-item">
					<view class="content">
						<text >施工类型</text>
					</view>
					<view class="action">
						<text v-if="form.order_service_type_id == 597">安装</text>
						<text v-if="form.order_service_type_id == 598">维修</text>
						<text v-if="form.order_service_type_id == 599">拆卸</text>
					</view>
				</view>
				<view class="cu-item arrow">
					<view class="content">
						<text >主机</text>
					</view>
					<view class="action">
						<picker mode="selector" :range="selectList" range-key="device_name" @change="changeDevice">
							<text>{{device_name?device_name:"请选择"}}</text>
						</picker>
					</view>					
				</view>
				<!-- 保修服务费 -->
				<view class="input-item" style="display: flex; justify-content: space-between;">
					<view class="input-item-head" style="width: 200rpx;">
						<text>服务费</text>
					</view>
					<view class="input-item-content" style="flex: 1;">
						<input type="text"  pattern="\d*\.\d{2}" v-model="form.service_fee" maxlength="50" value=""  placeholder="请输入正确的格式0.00" />
					</view>
				</view>
				<!-- 施工地点 -->
				<view class="input-item">
					<view class="input-item-head">
						<text>施工地点</text>
					</view>
					<view class="input-item-content">
						<textarea v-model="form.address" maxlength="50" value="" placeholder="请输入施工地点(50字以内)" />
					</view>
				</view>
				<!-- 施工内容 -->
				<view class="input-item">
					<view class="input-item-head">
						<text>施工详情</text>
					</view>
					<view class="input-item-content">
						<textarea v-model="form.title" maxlength="150" value="" placeholder="请输入施工内容(150字以内)" />
					</view>
				</view>
				<!-- 施工内容 -->
				<view class="input-item">
					<view class="input-item-head">
						<text>工程人员</text>
					</view>
					<view class="member-item" v-for="(i,j) in memberList" :key="j">
						<view class="base-msg">
							<image src="../../../../static/work.png" mode=""></image>
							<text>{{i.realname}}</text>
						</view>
						<view class="right">
							<text class="cuIcon-right"></text>
						</view>
					</view>
					<view class="input-item-content-p" @tap="toAddMember()">
						<text class="cuIcon-add" style="margin-right: 20rpx;"></text>
						<text>添加人员</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 完成按钮 -->
		<view class="button" @tap="add()">
			<view>
				<text>发布</text>
			</view>
		</view>
		
		<!-- 工程人员 -->
		<!-- <view class="box">
			<view class="cu-list menu margin-top" >
				<view class="cu-item">
					<view class="content">
						<text  class="cuIcon-group"></text>
						<text>工程成员</text>
					</view>
					<view class="action">
						<text style="color: #555;"></text>
					</view>
				</view>
				<view class="cu-item" v-for="(i,j) in 3" :key="j">
					<view class="content">
						<image style="width: 70rpx; height: 70rpx; border-radius: 50%;" src="../../../../static/work.png" mode=""></image>
						<text>张嘉佳</text>
					</view>
					<view class="action">
						<text style="color: #555;">
							<text class="cuIcon-right"></text>
						</text>
					</view>
				</view>
			</view>
		</view> -->
		
	</view>
</template>

<script>
	import api from "../../../../network/index.js"
	export default {
		data() {
			return {
				selectValue: "选中的值",
				form:{
					order_service_type_id: "",
					order_device_id: "",
					title: "",
					address: ""
				},
				selectList:[],
				device_name: "",
				memberList:[]
			};
		},
		methods:{
			select(e){
				console.log(e)
			},
			// 去选择成员
			toAddMember(){
				const t = this
				//监听事件
				uni.$on('fire', function(data) {
				    // data即为传过来的值
				    console.log("data", data);
					t.memberList = data.data
				    //清除监听，不清除会消耗资源
				    uni.$off('fire');
				});
				uni.navigateTo({
					url: "./addmember/addmember"
				})
			},
			// 发布按钮
			add(){
				const t = this
				// 收集用户输入的表单数据
				// 施工类型，主机，预计费用,地点，描述，工程人员
				if(!this.form.order_service_type_id){
					uni.showToast({
						icon:"none",
						title: "请选择您要维保设备~"
					})
					return
				} else if (!this.form.order_device_id){
					uni.showToast({
						icon:"none",
						title: "请选择您要维保设备~"
					})
					return
				} else if (!this.form.address){
					uni.showToast({
						icon:"none",
						title: "请输入施工地址~"
					})
					return
				} else if (!this.form.title){
					uni.showToast({
						icon:"none",
						title: "请描述施工内容~"
					})
					return
				}  else if (!this.form.service_fee){
					uni.showToast({
						icon:"none",
						title: "请描述输入保修服务费~"
					})
					return
				} else if (this.memberList.length == 0){
					uni.showToast({
						icon:"none",
						title: "请至少添加一位工程人员~"
					})
					return
				}
				// 检测服务费输入类型
				let rule = /\d*\.\d{2}/
				if(!rule.test(this.form.service_fee)){
					uni.showToast({
						icon: "none",
						title: "请输入正确的格式￥0.00"
					})
					return
				}
				api.request({
					url: api.SERVICE_ADD,
					data:this.form
				}).then(res=>{
					console.log(res)
					if(res.data.code == "200"){
						const obj = res
						// 添加工程人员
						this.memberList.forEach(res=>{
							api.request({
								url: api.SERVICE_ADD_MEMBER,
								data: {
									order_service_id: obj.data.id,
									user_id: res.id
								}
							}).then(res=>{
								
							}).catch(err=>{
								api.error(err)
							})
						})
						
						// 添加成功跳转页面
						uni.reLaunch({
							url: "../../../success/success?title=发布成功"
						})
					}else{
						api.error(res)
					}
				}).catch(err=>{
					console.log(err)
					api.error(err)
				})
				
			},
			// 请求主机列表
			getDeviceList(){
				api.request({
					url: api.DEVICE_LIST,
				}).then(res=>{
					// console.log(res)
					if(res.data.code == "200"){
						let data = res.data.list.data
						this.selectList = data
					} else {
						api.error(res)
					}
				}).catch(err=>{
					api.error(err)
				})
			},
			// 选择主机
			changeDevice(e){
				this.form.order_device_id = this.selectList[e.detail.value-0].id
				this.device_name =  this.selectList[e.detail.value-0].device_name
			}
		},
		onLoad(options) {
			// 判断保修类型
			if(options.type == "install")this.form.order_service_type_id = "597"
			if(options.type == "uninstall")this.form.order_service_type_id = "599"
			if(options.type == "repair")this.form.order_service_type_id = "598"
			// 获取主机列表
			this.getDeviceList()
		}
	}
</script>

<style lang="scss">
.input-item{
	background-color: #FFFFFF;
	.member-item{
		padding: 0 30rpx;
		display: flex;
		justify-content: space-between;
		border: 1rpx solid #EEEEEE;
		font-size: 30rpx;
		height: 100rpx;
		line-height: 100rpx;
		.base-msg{
			image{
				width: 80rpx;
				height: 80rpx;
				vertical-align: middle;
			}
		}
	}
	.input-item-content{
		// padding: 30rpx;
		padding: 0 30rpx;
		height: 120rpx;
		width: 100%;
		input{
			margin: 30rpx 0;
			line-height: 33rpx;
			background-color: #ffffee;
			border: 1rpx solid #EEEEEE;
			font-size: 30rpx;
		}
		textarea{
			padding: 10rpx;
			width: 100%;
			height: 100%;
			line-height: 33rpx;
			background-color: #ffffee;
			border: 1rpx solid #EEEEEE;
			font-size: 30rpx;
		}
	}
	.input-item-head{
		padding: 30rpx;
		font-size: 30rpx;
	}
	.input-item-content-p{
		padding: 30rpx;
		text-align: center;
		border-bottom: 1rpx solid #EEEEEE;
		border-top: 1rpx solid #EEEEEE;
		font-size: 30rpx;
	}
}
.box{
	margin: 0 20rpx;
	background-color: #FFFFFF;
	box-shadow: 4rpx 4rpx 8rpx #AAAAAA;
	padding-bottom: 20rpx;
}
.button{
	view{
		margin: 40rpx;
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		background-color: #39b54a;
		color: #FFFFFF;
		font-size: 32rpx;
		font-weight: 800;
		border-radius: 20rpx;
	}
}
</style>
